<template>
  <div>
    <breadcrumb></breadcrumb>

    <!-- 列表 -->
    <div class="main">
      <div class="main_head">
        <div class="main_head_left">
          <!-- <div class="dialogs">
                        <div style="display: flex;align-items: center;">
                            <div style="width: 200px;">
                                <el-input size="small" placeholder="请输入内容" v-model="keyWord" clearable></el-input>
                            </div>
                            <el-button type="primary" @click="cread" style="margin-left: 15px;">查询</el-button>
                        </div>
                    </div> -->
          <div class="inputItem">
            <div class="title">门店名称(编号)</div>
            <div class="inputBox">
              <el-input
                v-model="keyWord"
                @keyup.enter.native="cread(1)"
                clearable
              >
              </el-input>
            </div>
          </div>
          <div class="inputItem">
            <div class="title">审核状态</div>
            <div class="inputBox">
              <el-select v-model="status">
                <el-option value="" label="全部">全部</el-option>
                <el-option value="0" label="未审核">未审核</el-option>
                <el-option value="1" label="通过">通过</el-option>
                <el-option value="2" label="驳回">驳回</el-option>
              </el-select>
            </div>
          </div>
          <!-- 查询 -->
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="cread(1)"
            >查询</el-button
          >
          <el-button
            type="plain"
            size="small"
            icon="el-icon-refresh-right"
            @click="CleanUp"
            >清空</el-button
          >
        </div>
      </div>

      <div class="list">
        <el-table :data="records" style="width: 100%" header-align="left">
          <el-table-column
            align="left"
            prop="SerialNumber"
            width="70"
            label="序号"
          >
          </el-table-column>
          <el-table-column
            align="left"
            prop="storeNo"
            label="门店编号"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="left"
            prop="sname"
            label="门店名称"
            min-width="160"
          ></el-table-column>
          <!-- <el-table-column align="left" label="坐标" width="180">
						<template slot-scope="scope">
							{{ scope.row.lng + "," + scope.row.lat }}
						</template>
					</el-table-column>
					<el-table-column align="left" prop="contacts" label="联系人" width="100">
						<template slot-scope="scope">
							<div>{{ scope.row.contacts || '--.--' }}</div>
						</template>
					</el-table-column>
					<el-table-column align="left" prop="phone" label="联系人电话" width="120">
						<template slot-scope="scope">
							<div>{{ scope.row.phone || '--.--' }}</div>
						</template>
					</el-table-column> -->
          <el-table-column
            align="left"
            prop="addr"
            label="收货地址"
            min-width="260"
          >
          </el-table-column>
          <el-table-column
            align="left"
            prop="status"
            label="审核状态"
            min-width="120"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.status == 0">未审核</div>
              <div v-if="scope.row.status == 1" style="color: #1acb7a">
                通过
              </div>
              <div v-if="scope.row.status == 2" style="color: red">驳回</div>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="createTime"
            label="申请时间"
            width="140"
          >
            <template>
              <div slot-scope="scope">
                <div>{{ scope.row.createTime || "--.--" }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="createBy"
            label="申请人"
            width="100"
          >
            <template>
              <div slot-scope="scope">
                <div>{{ scope.row.createBy || "--.--" }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="updateTime"
            label="更新时间"
            width="140"
          >
            <template>
              <div slot-scope="scope">
                <div>{{ scope.row.updateTime || "--.--" }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="updateBy"
            label="更新人"
            width="100"
          >
            <template>
              <div slot-scope="scope">
                <div>{{ scope.row.updateBy || "--.--" }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作" width="140">
            <template slot-scope="scope">
              <div>
                <el-button
                  v-if="scope.row.status == 0"
                  type="text"
                  size="small"
                  @click="showAlterDialog(scope.row)"
                  >审核</el-button
                >
                <el-button
                  v-if="scope.row.status != 0"
                  type="text"
                  size="small"
                  @click="delBtn(scope.row)"
                  >删除</el-button
                >
                <!-- <el-button type="text" size="small" @click="delBtn(scope.row)">删除</el-button> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paginationBox">
        <el-pagination
          @current-change="changePages($event)"
          class="pagination"
          background
          layout="slot,prev, pager, next"
          :current-page.sync="pageCurrent"
          :total="data.total * 1"
          :page-size="data.size * 1"
          :pager-count="5"
        >
          <template slot>
            <span
              style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              "
            >
              共{{ data.total }}条,每页{{ data.size }}条
            </span>
          </template>
        </el-pagination>
      </div>

      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="1200px"
        :close-on-click-modal="false"
        class="dialog"
        @close="beforeClose"
      >
      <div style="display: flex">
          <div>
            <el-form
              ref="formdata"
              :model="origin"
              :rules="formRules"
              label-width="100px"
            >
              <p style="margin-left: 20px; font-weight: 600">未修改前：</p>
              <el-form-item label="门店编号">
                <div class="inputDeep">
                  <el-input
                    placeholder="请输入内容"
                    :readonly="true"
                    v-model="formdata.storeNo"
                    size="small"
                    class="border"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item label="门店名称:">
                <div class="inputDeep">
                  <el-input
                    placeholder="请输入内容"
                    :readonly="true"
                    v-model="formdata.sname"
                    size="small"
                    class="border"
                  ></el-input>
                </div>
              </el-form-item>
              <div style="width: 500px">
                <el-form-item label="经度,纬度">
                  <div class="inputDeep">
                    <el-input
                      placeholder="示例：29.322154,29.322154"
                      size="small"
                      :readonly="true"
                      v-model="origin.jinwei"
                    ></el-input>
                  </div>
                </el-form-item>
              </div>
              <el-form-item label="联系人">
                <div class="inputDeep">
                  <el-input
                    placeholder="请输入内容"
                    size="small"
                    :readonly="true"
                    v-model="origin.usedContacts"
                    clearable
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item label="联系人电话">
                <div class="inputDeep">
                  <el-input
                    placeholder="请输入内容"
                    size="small"
                    :readonly="true"
                    v-model="origin.usedPhone"
                    clearable
                  ></el-input>
                </div>
              </el-form-item>

              <el-form-item label="收货地址">
                <div class="inputDeep">
                  <el-input
                    placeholder="请输入内容"
                    :readonly="true"
                    v-model="origin.usedAddr"
                    size="small"
                    clearable
                  ></el-input>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-form
              ref="formdata"
              :model="formdata"
              :rules="formRules"
              v-loading="loading"
              label-width="100px"
            >
            <p style="margin-left: 20px; font-weight: 600">修改后：</p>
              <el-form-item label="门店编号">
                <div class="inputDeep">
                  <el-input
                    placeholder="请输入内容"
                    :readonly="true"
                    v-model="formdata.storeNo"
                    size="small"
                    class="border"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item label="门店名称:">
                <div class="inputDeep">
                  <el-input
                    placeholder="请输入内容"
                    :readonly="true"
                    v-model="formdata.sname"
                    size="small"
                    class="border"
                  ></el-input>
                </div>
              </el-form-item>

              <div style="width: 500px">
                <el-form-item label="经度,纬度:">
                  <div class="inputDeep">
                    <el-input
                      placeholder="示例：29.322154,29.322154"
                      :readonly="true"
                      size="small"
                      class="border"
                      v-model="formdata.jinwei"
                    ></el-input>
                  </div>
                </el-form-item>
              </div>
              <el-form-item label="联系人:">
                <div class="inputDeep">
                  <el-input
                    placeholder="请输入内容"
                    size="small"
                    :readonly="true"
                    class="border"
                    v-model="formdata.contacts"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item label="联系人电话:">
                <div class="inputDeep">
                  <el-input
                    placeholder="请输入内容"
                    size="small"
                    :readonly="true"
                    class="border"
                    v-model="formdata.phone"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item label="收货地址:">
                <div class="inputDeep">
                  <el-input
                    placeholder="请输入内容"
                    :readonly="true"
                    v-model="formdata.address"
                    class="border"
                    size="small"
                  ></el-input>
                </div>
              </el-form-item>
            </el-form>
          </div>
        
        </div>

        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
          <el-button type="danger" @click="ByStoreNo(2)">驳 回</el-button>
          <el-button type="primary" @click="ByStoreNo(1)">通 过</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { read, utils } from "xlsx";
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";

export default {
  data() {
    let validStoreNo = (rule, value, callback) => {
      let params = {};
      if (this.formdata.supplierId != "") {
        // params = {
        // 	storeNo: value,
        // 	supplierId: this.formdata.supplierId,
        // };
        callback(); // 编辑地址时不验证,因为已经禁用输入框,只要确保回填无误
      } else {
        params = {
          storeNo: value,
        };
        delete params.supplierId;
      }
      ////console.log('统一', params);
      httpApi.basicSettingsApi.checkStoreNo(params).then((res) => {
        ////console.log('校验', res);
        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("门店编号已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };
    return {
      createTime: [],
      title: "新增地址",
      records: [],
      data: {
        total: "",
        size: "",
      },
      formdata: {
        storeNo: "",
        address: "",
        sname: "",
        phone: "",
        contacts: "",
        supplierId: "",
        lng: "",
        lat: "",
      },
      origin: {
        usedAddr: "",
        usedContacts: "",
        usedLat: "",
        usedLng: "",
        usedPhone: "",
        sname: "",
      },
      status: "",
      formRules: {
        storeNo: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
          {
            validator: validStoreNo,
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        sname: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        // phone: [{ required: true, message: "不能为空", trigger: "blur" }],
        // contacts: [{ required: true, message: "不能为空", trigger: "blur" }],
        lng: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
        lat: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
      },
      loading: false,
      pageCurrent: 1,
      pageSize: 15,
      dialogVisible: false,
      keyWord: "",
    };
  },
  methods: {
    beforeClose() {
      if (this.title == "编辑地址") {
        for (let key in this.formdata) {
          this.formdata[key] = "";
          //console.log(key);
          this.$refs["formdata"].clearValidate(key);
        }
      }
    },
    clearUp() {
      for (let key in this.formdata) {
        this.formdata[key] = "";
      }
    },
    ByStoreNo(ind) {
      if (this.loading) {
        this.$message.warning("正在提交中");
        return;
      }
      this.loading = true;
      var d = {
        storeNo: this.formdata.storeNo,
        status: ind,
      };
      this.$http.orderApi.auditStoreAddrExamine(d).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.clearUp(); //清空表单
          this.dialogVisible = false;
          this.loading = false;
          this.cread();
        }
      });
    },
    showAddAddress() {
      this.title = "新增地址";
      this.dialogVisible = true;
      this.formdata.supplierId = "";
      //console.log(this.formdata);
    },
    showAlterDialog(e) {
      this.title = "编辑地址";
      this.origin = e;
      this.origin.jinwei = e.usedLng + "," + e.usedLat;
      for (let k in this.formdata) {
        if (k == "address") {
          this.formdata.address = e.addr;
          continue;
        }
        this.formdata[k] = e[k];
      }
      this.formdata.jinwei = e.lng + "," + e.lat;

      this.dialogVisible = true;
    },
    jumpBaidu() {
      window.open("https://api.map.baidu.com/lbsapi/getpoint/index.html");
    },
    delBtn(e) {
      let that = this;
      this.$confirm("是否删除此条审核记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.$http.orderApi
            .deleteStoreAddrExamine({
              said: e.said,
            })
            .then((res) => {
              if (res.data.code == 200) {
                that.$message({
                  type: "success",
                  message: "删除成功!",
                });
                that.cread();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    Download() {
      const a = document.createElement("a");
      a.href = "/storeAddress.xlsx";
      a.download = "storeAddress.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    changePages(e) {
      this.pageCurrent = e;
      this.cread();
    },
    //批量订单的创建，excle
    //导入excel文档
    upload(file, fileList) {
      let files = {
        0: file,
      };
      this.readExcel1(files);
    },
    // 获取导入excel文档的数据
    readExcel1(files) {
      var that = this;
      if (files.length <= 0) {
        return;
      }
      if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error("上传格式不正确，请上传xls或者xlsx格式");
        return;
      }
      const fileReader = new FileReader();
      var yind = 0;
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = read(data, {
            type: "binary",
          });
          const wsname = workbook.SheetNames[0];
          const ws = utils.sheet_to_json(workbook.Sheets[wsname]);

          let list = [];
          ws.forEach((item, index) => {
            yind = index + 1;
            list.push({
              sname: item["门店名称"],
              storeNo: item["门店编号"],
              address: item["详细地址"],
              phone: item["联系电话"],
              contacts: item["联系人"],
              economize: item["省(直辖市)"],
              district: item["区/县"],
              city: item["市"],
              lng: item["经度"],
              lat: item["纬度"],
            });
          });
          /* let moodZo = JSON.stringify(ws)
						
						let cont = moodZo.replace(/门店名称/g, "sname")
							.replace(/门店编号/g, "storeNo")
							.replace(/地址/g, "addr").replace(/联系电话/g, "phone").replace(/联系人/g, "contacts")

						let list = []
						cont = JSON.parse(cont)
						//console.log(moodZo)
						if (moodZo.indexOf("联系人") > -1) {
							cont.forEach((item, i) => {
								for (let k in item) {
									if (k == 'sname' || k == 'storeNo' || k == 'addr' || k == 'phone' || k ==
										'contacts') {
										list.push({
											sname: item['sname'],
											storeNo: item['storeNo'],
											address: item['addr'],
											phone: item['phone'],
											contacts: item['contacts']
										})
									}
								}
							})
						} else {
							cont.forEach((item, i) => {
								for (let k in item) {
									if (k == 'sname' || k == 'storeNo' || k == 'addr') {
										list.push({
											sname: item['sname'],
											storeNo: item['storeNo'],
											address: item['addr']
										})
									}
								}
							})
						}
						let forData = [];
						for (let i = 0; i < list.length; i++) {
							if (!forData.some(e => e.addr == list[i].addr)) forData.push(list[i]);
						}
						var reg = /\t/
						forData.forEach((item, i) => {
							for (let k in item) {
								if (reg.test(item[k])) {
									forData[i][k] = item[k].replace(/\s*$/g, "");
								}
							}
						}) */
          this.$http.orderApi.importStoreAddr(list).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("导入成功");
              this.cread();
            }
          });
        } catch (e) {
          if (yind == 0) {
            this.$message.error(res.data.msg);
          } else {
            this.$message.error("导入失败,第" + yind + "地址异常");
          }
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    },
    CleanUp() {
      this.keyWord = "";
      this.createTime = "";
      this.status = "";
      this.cread(1);
    },
    async cread(current) {
      var d = {
        current: current || this.pageCurrent,
        size: this.pageSize,
        keyWord: this.keyWord,
      };
      if (this.status != "") {
        d.status = this.status;
      }
      let res = await this.$http.orderApi.selectStoreAddrExamine(d);
      this.records = res.data.data.records;
      this.data.size = res.data.data.size;
      this.data.total = res.data.data.total;

      this.records.forEach((item, i) => {
        let num = i + 1 + Number(this.pageSize) * (this.pageCurrent - 1);
        item.SerialNumber = num;
      });
    },
  },
  created() {
    this.cread();
  },
  mounted() {},
  components: {
    breadcrumb,
  },
};
</script>

<style>
.inputDeep .el-input__inner {
  border: 0px;
  margin-top: 5px;
}
</style>
<style lang="scss" scoped>
.main {
  width: 100%;

  height: calc(100vh - 127px);
  background-color: #fff;
  padding: 0px 30px 0px 30px;
  // overflow-x: scroll;
  // min-width: 970px;

  .main_head {
    padding: 10px 0;

    .main_head_left {
      font-size: 12px;
      color: #262626;
      display: flex;

      .inputItem {
        display: flex;
        align-items: center;
        margin-right: 23px;

        > .title {
          color: #262626;
          font-size: 12px;
          margin-right: 7px;
        }

        > .inputBox {
          width: 160px;

          .select {
            ::v-deep .el-input__icon {
              line-height: 0;
            }
          }

          ::v-deep .el-input__inner {
            height: 32px;
            font-size: 12px;
          }

          ::v-deep .el-input__inner::placeholder {
            color: #c3c3c3;
            font-size: 12px;
          }
        }
      }
    }

    .main_head_right {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;

      .addCargoOwner {
        background-color: #1890ff;
        border-radius: 4px;
        height: 32px;
        color: #ffffff;
        font-size: 12px;
        padding: 8px 17px 9px 17px;
        transition: 0.2s;
        cursor: pointer;
        margin-right: 17px;

        .iconBtn {
          margin-right: 7px;
          font-size: 12px;
        }

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .list {
    height: calc(100% - 143px);

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 320px);
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: left;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }

    .stateBtns {
      height: 30px;

      ::v-deep .el-button {
        font-size: 12px;
        border: none;
        width: 76px;
        height: 30px;
        margin: 0 auto;
        box-sizing: border-box;
      }

      .icon-dian {
        font-size: 12px;
      }

      .Pass {
        background-color: #ecf5fe;
        color: #1890ff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 10px 9px;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;

    .pagination {
      margin-left: auto;
    }
  }
}

.dialog {
  .link {
    color: #1890ff;
    cursor: pointer;
    transition: 0.2s;
    margin-bottom: 15px;
    margin-left: 335px;
    display: inline-block;

    &:hover {
      opacity: 0.8;
    }
  }

  // 标题
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 20px;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    height: 50px;
  }

  ::v-deep .el-dialog__title {
    font-size: 14px;
    color: #303133;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 15px;
  }

  ::v-deep .el-dialog__body {
    padding: 25px 40px 24px;
  }

  //   表格
  ::v-deep .el-form-item__label {
    line-height: 32px;
    font-size: 12px;
    color: #262626;
    padding-top: 4px;
    width: 100%;
  }

  ::v-deep .el-input__inner {
    line-height: 32px;
    height: 32px;
    padding: 0 10px;
  }

  .cancelBtn {
    width: 80px;
    height: 36px;
    border: 1px solid #d9d9d9;
    color: #262626;
    font-size: 12px;
    border-radius: 4px;
    background-color: #fff;
  }

  .submitBtn {
    background-color: #1890ff;
    width: 80px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }

  .inputSelect_left {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 4px 0px 0px 4px;
    }
  }

  .inputSelect_right {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 0px 4px 4px 0px;
      border-left: none;
      background-color: #f5f7fa;
      font-size: 12px;
      color: #606266;
    }
  }

  ::v-deep .el-input__icon {
    line-height: 0;
  }

  ::v-deep .el-form-item__content {
    line-height: 0;
  }

  .notes ::v-deep .el-textarea .el-input__count {
    bottom: 15px;
    color: #c0c4cc;
  }
}
</style>
